import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";
import ProTable, {ActionType} from "@ant-design/pro-table";
import {useRef, useState} from "react";
import {getUserInvoice} from "@/services/ant-design-pro/FinancialOperation";
import EditModal from "@/pages/Financial/financialOperations/invoiceManagement/components/EditModal";

const Invoice = () => {
	const [isShowEdit, setIsShowEdit] = useState(false)   // 顶部搜索状态
	const [search, setSearch] = useState([])   // 顶部搜索状态
	const [editId, setEditId] = useState(null)   // 编辑id
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	const columns = [
		{
			title: '订单号',
			dataIndex: 'order_id',
			align: 'center',
			render: (_, rouder) => {
				return (
					<div>{rouder.order?.order_number}</div>
				)
			}
		},
		{
			title: '订单金额',
			dataIndex: 'oreder?.pay_price',
			align: 'center',
			render: (_, rouder) => {
				return (
					<div>{rouder.order?.pay_price}</div>
				)
			}
		},
		{
			title: '发票类型',
			dataIndex: 'type',
			align: 'center',
			valueEnum: {
				0: { text: '普通'  },
				1: { text: '专用' },

			},
		},
		{
			title: '发票抬头类型',
			dataIndex: 'header_type',
			search: false,
			align: 'center',
			valueEnum: {
				0: { text: '个人'  },
				1: { text: '企业' },

			},
		},
		{
			title: '下单时间',
			dataIndex: 'created_at',
			align: 'center',
			search: {
				transform: (value) => {
					return {
						startTime: value[0],
						endTime: value[1],
					};
				},
			},
		},
		{
			title: '开票状态',
			align: 'center',
			dataIndex: 'invoice_status',
		},
		{
			title: '订单状态',
			align: 'center',
			dataIndex: 'oreder?.status',
			render: (_, rouder) => {
				return (
					<div>{rouder.order?.order_status}</div>
				)
			}
		},
		{
			title: '操作',
			valueType: 'option',
			width: 150,
			align: 'center',
			fixed: 'right',
			render: (text, record,) =>
				[
				<a
					key="editable"
					onClick={() => {
						setIsShowEdit(true)
						setEditId(record.id)
					}}
				>
					编辑
				</a>,
				<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
					订单信息
				</a>,

			],
		},
	];
  return (
	  <PageContainer
		  header={{title: '发票管理', breadcrumb: {},}}
		  // 导航订单数据
		  tabList={ [
			  {
				  tab: `全部发票 (132)`,
				  key: '1',
			  },
			  {
				  tab: `普通订单 (21)`,
				  key: '2',
			  },
			  {
				  tab: `拼团订单(21})`,
				  key: '3',
			  },
			  {
				  tab: `秒杀订单 (121)`,
				  key: '4',
			  },
			  {
				  tab: `砍价订单( 211)`,
				  key: '5',
			  },
		  ]}
		  // 导航订单类型 搜索条件拼接
		  onTabChange={(key) => {
			  switch (key) {
				  case '1':
					  setSearch({
						  ...search,
						  ...{invoice_status: undefined}
					  })
					  break;
				  case '2':
					  setSearch({
						  ...search,
						  ...{invoice_status: 'notInvoiced'}
					  })
					  break;
				  case '3':
					  setSearch({
						  ...search,
						  ...{invoice_status: 'invoiced'}
					  })
					  break;
				  case '4':
					  setSearch({
						  ...search,
						  ...{invoice_status: 'refundInvoiced'}
					  })
					  break;
			  }
			  actionRef.current.reload();  // 刷新表格
		  }}
	  >
		   <ProCard>
			  <ProTable
				  columns={columns}
				  scroll={{x:1400}}
				  actionRef={actionRef}
				  request={async (params = {}, sort, filter) => {
					 let {data} = await getUserInvoice({...params,...sort,...filter,...search})
					 return {
						 data,
						 success:true
					 }
				  }}
				  editable={{
					  type: 'multiple',
				  }}
				  columnsState={{
					  persistenceKey: 'pro-table-singe-demos',
					  persistenceType: 'localStorage',
				  }}
				  rowKey="id"
				  search={{
					  labelWidth: 'auto',
				  }}
				  form={{
					  // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
					  syncToUrl: (values, type) => {
						  if (type === 'get') {
							  return {
								  ...values,
								  created_at: [values.startTime, values.endTime],
							  };
						  }
						  return values;
					  },
				  }}
				  dateFormatter="string"
				  headerTitle="高级表格"
				  toolBarRender={() => [

				  ]}
			  />
		  </ProCard>
		  {isShowEdit ?
			  <EditModal visible={isShowEdit} setVisible={setIsShowEdit} id={editId}/>
			  :null
		  }
    </PageContainer>
  );
};

export default Invoice;
